<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
  <link rel="icon" type="image/x-icon" href="./icon-192x192.png">
  <link rel="manifest" href="./manifest.json">
  <meta name="theme-color" content="#ffffff">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <title>Chat GPT Simple</title>
  <link rel="stylesheet" href="./main.css">
</head>
<div style="display: flex; align-items: center;">
  <h2 style="display: inline-block;">Chat GPT Simple <span style="font-size: 70%; color: #333">(v0.1.1)</span></h2>
  <div style="flex: 1;"></div>
  <input onclick="reset()" type="submit" title="New (ctrl + i)" value="🥚" />
  <input onclick="showHistory(true)" type="submit" title="History (ctrl + h)" value="🥑" />
  <input onclick="showSettings(true)" type="submit" title="Setting (ctrl + ,)" value="🍪" />
</div>
<div id="box"></div>
<div id="input">
  <input onclick="speechToText()" type="submit" title="Speech to text (ctrl + b)" value="🎄" />
  <div id="line" type="text" contenteditable="true"></div>
  <div id="loader" class="loader" hidden></div>
  <input onclick="onSend()" type="submit" title="按 'ctrl+enter' 或 'alt+enter' 快捷键发送" value="▶" />
</div>
<div style="text-align: right; font-size: 90%; margin-bottom: 4px;">
  <a href="#top">TOP</a>
  ctrl(alt)+enter
</div>
<div id="settingsModal" class="modal" style="display: none;">
  <div id="settings" class="model-body">
    <div style="display: flex; align-items: center;">
      <h2 style="display: inline-block">Setting</h2>
      <div style="flex: 1;"></div>
      <input style="width: auto; font-size: 1.5rem;" onclick="showSettings(false)" type="submit" title="Close (Esc)"
        value="☕" />
    </div>
    <label class="label">Domain</label>
    <input type="text" id="domainInput" />
    <label class="label">API Key <span style="color: red">*</span></label>
    <input placeholder='OpenAI API Key' type="text" id="apiKeyInput" />
    <label class="label">Model <span style="color: red">*</span></label>
    <select id="modelInput" style="font-size: 1.1rem; padding: 3px">
      <option value="gpt-3.5-turbo">ChatGPT ($0.002 / 1K tokens) *</option>
      <option value="text-ada-001">Ada ($0.0004 / 1K tokens)</option>
      <option value="text-babbage-001">Babbage ($0.0005 / 1K tokens)</option>
      <option value="text-curie-001">Curie ($0.0020 / 1K tokens)</option>
      <option value="text-davinci-003">Davinci ($0.0200 / 1K tokens)</option>
    </select>
    <label class="label">Max tokens</label>
    <input type="text" id="maxTokensInput" />
    <label class="label">Temperature</label>
    <input type="text" id="temperatureInput" />
    <label class="label" style="display: flex; align-items: center;" title="Text to speech">
      Text to speech
      <input id="ttsInput" type="checkbox" style="width: 1.2rem; height: 1.2rem; margin-left: 10px;" />
    </label>
    <label class="label" style="display: flex; align-items: center;" title="Only use whisper for speech recognition">
      Only use Whisper
      <input id="whisperInput" type="checkbox" style="width: 1.2rem; height: 1.2rem; margin-left: 10px;" />
    </label>
    <label class="label">Recognition language</span></label>
    <select id="recogLangInput" style="font-size: 1.1rem; padding: 3px">
      <option value="zh">中文</option>
      <option value="zh-CN">中文（简体）</option>
      <option value="zh-TW">中文（繁体）</option>
      <option value="zh-HK">中文（粤语）</option>
      <option value="en">英文</option>
      <option value="en-US">英文（美式）</option>
      <option value="en-UK">英文（英式）</option>
    </select>
    <label class="label">What is your assistant</label>
    <textarea id="systemPromptInput"></textarea>
    <label style="display: flex; align-items: center;" title="In a thread, each session is a new session (ctrl + ;)">
      Long conversation
      <input id="multiConvInput" type="checkbox" style="width: 1.2rem; height: 1.2rem; margin-left: 10px;" />
    </label>
    <details id="promptDetails" style="margin: 20px 0;">
      <summary>Assistant Public Prompts</summary>
      <div id="promptList"></div>
    </details>
    <div style="display: flex; align-items: center; margin: 30px 0;">
      <div style="flex: 1;"></div>
      <button onclick="saveSettings()">Update</button>
      <div style="flex: 1;"></div>
      <a href="https://github.com/excing/chatgpt" target="_blank" style="padding: 10px 0;"><svg
          class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32"
          aria-hidden="true">
          <path fill-rule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
          </path>
        </svg></a>
    </div>
  </div>
</div>
<div id="historyModal" class="modal" style="display: none;">
  <div id="history" class="model-body">
    <div style="display: flex; align-items: center;">
      <h2 style="display: inline-block">History</h2>
      <div style="flex: 1;"></div>
      <input style="width: auto; font-size: 1.5rem;" onclick="showHistory(false)" type="submit" title="Close (Esc)"
        value="☕" />
    </div>
    <input style="width: auto" onclick="deleteAllHistory()" type="submit" title="Delete all history"
      value="Delete All" />
    <div id="historyList"></div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sse.js@0.6.1/lib/sse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js"></script>
<script src="./app.js"></script>
<!-- Google tag (gtag.js) -->
<script async src='https://www.googletagmanager.com/gtag/js?id=G-RBJJWTTD37'></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());

  gtag('config', 'G-RBJJWTTD37');
</script>